<script setup lang="ts">

defineOptions({
  name: 'VipLayoutVertical',
})

interface PropsType {
  collapse: boolean;
  fixedHeader: boolean;
  showTabs: boolean;
  device: string;
}

withDefaults(defineProps<PropsType>(), {
  collapse: false,
  fixedHeader: true,
  showTabs: true,
  device: 'desktop',
})
</script>

<template>

  <!--  <section class="layout layout-vertical">-->
  <!--    <header class="layout-header">-->
  <!--      <VipLogoVertical />-->
  <!--      <VipNav />-->
  <!--    </header>-->

  <!--    <section class="layout-main-wrapper">-->
  <!--      <VipSideBar />-->
  <!--      <div class="layout-main">-->
  <!--        <VipTabs v-show="showTabs" />-->
  <!--        <VipAppMain />-->
  <!--        <VipFooter />-->
  <!--      </div>-->
  <!--    </section>-->
  <!--  </section>-->

  <el-container class="layout-vertical">
    <el-header class="layout-header">
      <VipLogoVertical />
      <VipNav />
    </el-header>

    <el-container class="layout-main-wrapper">
      <VipSideBar />
      <el-main class="layout-main">
        <VipTabs v-show="showTabs" />
        <VipAppMain />
        <VipFooter />
      </el-main>
    </el-container>
  </el-container>

</template>

<style scoped lang="scss">

.el-header {
  padding: 0 !important;
  display: flex;
  flex-direction: row;
}

.el-main {
  padding: 0 !important;
}

.layout-main-wrapper {
  overflow: hidden;

  .layout-main {
    display: flex;
    flex-direction: column;
  }
}


//.layout-vertical {
//  position: relative;
//  //box-sizing: border-box;
//  display: flex;
//  flex-direction: column;
//  flex: 1;
//  width: 100%;
//  height: 100%;
//
//  .layout-header {
//    box-sizing: border-box;
//    display: flex;
//    flex-direction: row;
//    background: var(--el-color-white);
//    border-bottom: 1px solid var(--el-border-color);
//    padding: 0 !important;
//  }
//
//  .layout-main-wrapper {
//    //box-sizing: border-box;
//    display: flex;
//    flex-direction: row;
//    flex: 1;
//    //overflow-y: hidden;
//    //width: 100%;
//    //min-width: 0;
//
//    .layout-main {
//      //position: relative;
//      //box-sizing: border-box;
//      display: flex;
//      flex-direction: column;
//      //flex: 1;
//      overflow-y: hidden;
//      width: 100%;
//      height: 100%;
//      min-width: 0;
//    }
//  }
//}

</style>
